<template>
  <el-col :span="24" class="d-flex flex-column justify-content-start align-items-center">

    <el-col :span="16" class="d-flex justify-content-start border shadow" style="height: 600px;margin-top: 120px">
      <el-col :span="16" class="h-100">
        <el-col :span="24" class="h-100 d-flex flex-column justify-content-center">
          <el-carousel :interval="4000" type="card" height="400px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </el-col>

      </el-col>

      <el-col :span="8" class="h-100 border-start flex-column align-items-center d-flex" v-if="!showSign">
        <el-col :span="20" class="text-md-start mt-5">
          <h2 style="font-family: 'Microsoft YaHei'">登录</h2>
        </el-col>

        <el-col :span="20" class="mt-5 pt-3" style="text-align: left">
          <label class="pb-2">账号:</label>
          <el-input v-model="username" placeholder="请输入账号"></el-input>
        </el-col>

        <el-col :span="20" class="mt-3 pt-3" style="text-align: left">
          <label class="pb-2">密码:</label>
          <el-input v-model="password" show-password placeholder="请输入密码"></el-input>
        </el-col>
        <el-col :span="20" class="mt-3">
          <el-button plain class="w-100" :loading="loading" @click="login">登录</el-button>
        </el-col>
        <el-col :span="20" style="text-align: right">
          <el-button type="text">忘记密码</el-button>
        </el-col>

        <el-col :span="20" class="mt-5">
          <el-button type="text" @click="cut">没有账号?立即注册</el-button>
        </el-col>
      </el-col>

      <el-col :span="8" class="h-100 border flex-column align-items-center d-flex" v-if="showSign">
        <el-col :span="20" class="text-md-start mt-5 d-flex justify-content-between">
          <el-col>
            <h2 style="font-family: 'Microsoft YaHei'">注册</h2>
          </el-col>
          <el-button type="text" @click="cut">返回登录</el-button>

        </el-col>

        <el-col :span="20" class="mt-3 pt-2" style="text-align: left">
          <label class="pb-2">账号:</label>
          <el-input v-model="sign.username" placeholder="请输入账号"></el-input>
        </el-col>

        <el-col :span="20" class="mt-1" style="text-align: left">
          <label class="pb-2">密码:</label>
          <el-input v-model="sign.password" show-password placeholder="请输入密码"></el-input>
        </el-col>
        <el-col :span="20" class="mt-1" style="text-align: left">
          <label class="pb-2">重复密码:</label>
          <el-input v-model="sign.passwordag" show-password placeholder="请重复输入密码"></el-input>
        </el-col>

        <el-col :span="20" class="mt-1" style="text-align: left">
          <label class="pb-2">邮箱:</label>
          <el-input v-model="sign.email" placeholder="请输入邮箱" type="email"></el-input>
        </el-col>

        <el-col :span="20" class="mt-1" style="text-align: left">
          <label class="pb-2">验证码:</label>
          <el-col :span="24" class="d-flex">
            <el-input v-model="sign.code" placeholder="请输入验证码"></el-input>
            <el-button plain @click="sendCode" :disabled="sign.dis">{{ sign.sendCodeTitle }}</el-button>
          </el-col>

        </el-col>


        <el-col :span="20" class="mt-4">
          <el-button plain class="w-100" :loading="sign.loading" @click="signAction">注册</el-button>
        </el-col>


      </el-col>


    </el-col>
  </el-col>
</template>

<script>
let model = {
  username: '',
  password: '',
  loading: false,
  showSign: false,
  sign: {
    username: '',
    password: '',
    passwordag: '',
    email: '',
    code: '',
    loading: false,
    dis: false,
    sendCodeTitle: '发送验证码'
  }
}

export default {
  data () {
    return model
  },
  name: 'LoginView',
  mounted () {
    this.$alert('测试阶段，不代表最终品质', '提示', {
      confirmButtonText: '确定',
      callback: action => {
        this.$message({
          type: 'info',
          message: `请登录`
        })
      }
    })

    if (localStorage.getItem('token') != null) {
      if (this.$route.name != 'login') {
        this.$http.ver()
      }
    }

    if (this.$route.params.isVerFalse) {
      this.$message({
        message: '登录过期,请重新登录',
        type: 'warning'
      })
    }
  },
  methods: {
    login () {
      this.$data.loading = true
      this.$http.login({
        username: this.$data.username,
        password: this.$data.password
      }).then(data => {
        if (data.data.code == 200) {
          localStorage.setItem('token', data.data.token)
          localStorage.setItem('user', JSON.stringify(data.data.user))
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push('/home')
          }, 2000)
        }
        this.$data.loading = false
      })
    },
    cut () {
      this.$data.showSign = !this.$data.showSign
    },
    signAction () {
      this.$data.sign.loading = true
      let res = this.$data.sign
      let data = {
        username: res.username,
        password: res.password,
        passwordag: res.passwordag,
        email: res.email,
        code: res.code
      }

      this.$http.sign(data).then(data => {
        this.$data.sign.loading = false
        console.log(data)
        if (data.data.code == 200) {
          setTimeout(() => {
            this.$data.showSign = !this.$data.showSign
          }, 2000)
          this.$data.username = res.username
          this.$data.password = res.password
        }
      })
    },
    sendCode () {
      let par = {
        username: this.$data.sign.username,
        mail: this.$data.sign.email
      }
      this.$http.sendCode(par).then(() => {

        let i = 60
        let ser = setInterval(() => {
          i--
          if (i != 0) {
            this.$data.sign.dis = true
            this.$data.sign.sendCodeTitle = i + '秒'
          } else {
            this.$data.sign.dis = false
            this.$data.sign.sendCodeTitle = '重新发送'
            clearInterval(ser)
          }
        }, 1000)

      })

    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
